<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 780px;
				height: 512px;
			}
			
			.spanfrom {
				float: left;
				margin-left: 40px;
			}
			
			.buttomfrom {
				float: right;
				margin-right: 40px;
				margin-bottom: 40px;
			}
		</style>
	</head>

	<body>
		<el-row>
		</el-row>
		<div id="app" class="app">
			<el-form ref="form" class="demo-ruleForm" :model="form" label-width="80px" :rules="rules" :inline="true">
				<el-row>
					<el-col>
						<span class="spanfrom">订单</span>
					</el-col>
					<el-col>
						<el-button class="buttomfrom" @click="onSubmit('form')">保存</el-button>
					</el-col>
				</el-row>
				<hr style="margin-bottom: 25px;"/>
				<div>
					<el-form-item label="主题：" label-width="100px" prop="name">
						<el-input v-model="form.name" style="width:250%;"></el-input>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="对应客户：" label-width="100px" prop="cumter">
						<el-autocomplete class="inline-input" v-model="cumter"
							 :fetch-suggestions="querySearch" 
							 placeholder="拼音头.编号 关键字" @select="handleSelect" style="margin-left:45%; width: 100%;"></el-autocomplete>
					</el-form-item>
					</el-form-item>
				</div>
				<!--<div>
					<el-form-item prop="state1">
						<el-autocomplete class="inline-input" v-model="state1"
							 :fetch-suggestions="querySearch" 
							 placeholder="拼音头.编号 关键字" @select="handleSelect" style="margin-left:45%; width: 100%;"></el-autocomplete>
					</el-form-item>
				</div>-->
				<el-form-item label="订单号：" label-width="100px" prop="ordersid">
					<el-input v-model="form.ordersid" label-width="100px"></el-input>
				</el-form-item>
				<el-form-item label="分类：" label-width="100px" prop="region">
					<el-select v-model="form.region" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
					<!--<p>   shdshodsodhosh    sdhso   {{region}}</p>-->
					
				</el-form-item>

				<el-form-item label="对应机会" label-width="100px" prop="jihui">
					<el-select v-model="form.jihui" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="发货金额：" label-width="100px" prop="famoneyse">
					<el-input placeholder="0.00" v-model="form.famoneyse"></el-input>
				</el-form-item>
				<el-form-item label="回款金额：" label-width="100px" prop="huimoney">
					<el-input placeholder="0.00" v-model="form.huimoney"></el-input>
				</el-form-item>
				<el-form-item label="客户签约人:" label-width="100px" prop="input6">
					<el-input placeholder="请输入内容" v-model="input6" class="input-with-select">
						<el-select v-model="select" slot="prepend" placeholder="选择">
							<el-option label="xxxx" value="1"></el-option>
							<el-option label="2222" value="2"></el-option>
							<el-option label="333333" value="3"></el-option>
						</el-select>
					</el-input>
				</el-form-item>
				<el-form-item label="日期:" label-width="100px" prop="date1">
					<el-col :span="15">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 150%;"></el-date-picker>
					</el-col>
				</el-form-item>

				<el-form-item label="最晚发货:" label-width="100px" prop="date2">
					<el-col :span="15">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 150%;"></el-date-picker>
					</el-col>
				</el-form-item>

				<el-form-item label="操作人" prop="input5">
					<el-input placeholder="关键字拼音字头" v-model="input5"  style="width:150%;" class="input-with-select">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-form-item>
				<div>
					<el-form-item label="状态:" prop="typese">
						<el-radio-group v-model="form.typese">
							<el-radio label="执行中" name="type"></el-radio>
							<el-radio label="结束" name="type"></el-radio>
							<el-radio label="意外终止" name="type"></el-radio>
						</el-radio-group>
					</el-form-item>
				</div>
				<el-form-item label="结款方式" prop="retegion">
					<el-select v-model="form.retegion" placeholder="未选">
						<el-option label="货到付款" value="shanghai"></el-option>
						<el-option label="先款后货" value="beijing"></el-option>
						<el-option label="账期收款" value="beijing"></el-option>
						<el-option label="月结" value="beijing"></el-option>
						<el-option label="季结" value="beijing"></el-option>
						<el-option label="年结" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="项目：" prop="orderxiangmu">
					<el-input v-model="form.orderxiangmu"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<script>
			var vm = new Vue({
				el: ".demo-ruleForm",
				data() {
					return {
						form: {
							name: '',
							cumter: '',
							ordersid: '',
							region: '',
							jihui: '',
							famoneyse: '',
							huimoney: '',
							input6: '',
							date1: '',
							date2: '',
							input5: '',
							typese: '',
						/*	retegion:'',*/
							orderxiangmu:''							
						},
				//验证规则
						rules:{
							//数据源
							name:[
							    {required: true, message: '请输入主题', trigger: 'blur'}
							],
							cumter:[
							{ required: true, message: '客户不能为空', trigger: 'change' }
							],
							typese:[
							{ required: true, message: '状态不能为空', trigger: 'change' }
							],
							huimshu:[
							{ required: true, message: '请输入产品数量', trigger: 'change' }
							],
							input5:[
							{ required: true, message: '请输入操作人', trigger: 'change' }
							]
						}
				};
				},
					methods: {
					onSubmit(form) {
				/*	console.log(famoney);*/
	    	//验证方法
	        this.$refs[form].validate((valid) => {
	          if (valid) {
	        	  //post提交数据
	           	axios.post("/form",
	           			//参数转换
	           			Qs.stringify(this.form,{arrayFormat: 'brackets'})
	           		//	params:
	           			//ajax请求成功的回调函数
	           			).then(function(v){
	           			console.log("回调成功，获取了服务器端返回的值v");
	           			console.log(v);
	           	}).catch(function(){
	           		alert("出错了");
	           	});
	        	  
	        	  
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      
					}
				}
			});
		</script>

	</body>

</html>